<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>发布博文</title>
    <link href="/baseAdmin/pear/css/pear.css" rel="stylesheet">
    <link href="/plugins/editormd/css/editormd.min.css" rel="stylesheet">
</head>
<body>
<div>
    <div align="center">
        <form class="layui-form" action="" lay-filter="release" style="width: 80%">
            <hr class="layui-bg-gray">
            <div class="layui-form-item">
                <input type="text" name="title" required
                       lay-verify="required" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
            </div>

            <div class="layui-form-item" id="md-content">
                <textarea name="content" id="markdown"></textarea>
            </div>

            <div class="layui-form-item" align="right">
                <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"
                        lay-submit="" lay-filter="submit">发布文章</button>
                <button type="button" class="layui-btn layui-btn-primary layui-btn-radius"
                        lay-submit="" lay-filter="draft">保存草稿</button>
            </div>

        </form>

    </div>
    <form class="layui-form" id="release" lay-filter="release" style="width: 90%;display: none">
        <hr class="layui-bg-gray">
        <div class="layui-form-item" style="display: none">
            <input type="text" name="articleTitle" id="title" placeholder="请输入文章标题" autocomplete="off" class="layui-input">
        </div>

        <div class="layui-form-item" style="display: none">
            <textarea name="contentMd" id="content"></textarea>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">分类专栏</label>
                <div class="layui-input-inline">
                    <select name="articleCategory" id="category">
                        <option value="0" th:each="category:${categoryList}" th:value="${category.id}" th:text="${category.categoryName}">分类1</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="align-content: center">文章类型</label>
                <div class="layui-input-inline">
                    <select name="articleType" lay-verify="required">
                        <option value="0">原创</option>
                        <option value="1">转载</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="align-content: center">发布形式</label>
                <div class="layui-input-inline">
                    <select name="isView" lay-verify="required">
                        <option value="1">公开</option>
                        <option value="0">私密</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label" style="align-content: center">文章标签</label>
            <div class="layui-card layui-inline" style="width: 450px">
                <select name="tagIds" id="tagIds" xm-select="select4" xm-select-skin="default">
                    <option value="1" th:each="tag:${tagList}" th:value="${tag.id}" th:text="${tag.tagName}">标签1</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item layui-upload" style="align-content: center">
            <label class="layui-form-label">文章封面</label>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="test1">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" style="width: 100px;height: 100px">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="display: none">
            <input type="text" name="coverImg" id="coverImg" class="layui-input">
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文章描述</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入内容" id="articleDesc" name="articleDesc" class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-form-item" align="right">
            <button type="button" class="layui-btn layui-btn-danger layui-btn-radius"
                    lay-submit="" lay-filter="release">发布文章</button>
            <button type="button" class="layui-btn layui-btn-radius" onclick="cancel()">取消</button>
        </div>

    </form>

</div>

<script src="/baseAdmin/layui/layui.js"></script>
<script src="/blog/js/uploadImg.js"></script>
<script src="/baseAdmin/pear/pear.js"></script>
<script src="/plugins/jquery/jquery-3.4.1.min.js"></script>
<script src="/layuimini/js/lay-module/layuimini/miniTab.js" charset="utf-8"></script>
<script src="/plugins/editormd/editormd.min.js"></script>
<script src="/plugins/editormd/lib/marked.min.js"></script>
<script src="/plugins/editormd/lib/prettify.min.js"></script>
<script>

    /** 初始化editormd **/
    var contentEditor,markdownHtml;
    $(function() {
        contentEditor = editormd("md-content", {
            width   : "100%",
            height  :  700,
            syncScrolling : true,
            emoji   : false,
            path    : "/plugins/editormd/lib/",
            imageUpload : true,
            imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
            imageUploadURL : "/system/article/markdown/upload",
            onload : function() {
                var keyMap = {
                    "Ctrl-S": function(cm) {
                        console.log("提供保存-暂未实现");
                    }
                };
                this.addKeyMap(keyMap);
                initPasteDragImg(this); //粘贴上传文件
            }
        });

    });

    layui.use(['code', 'element','select','form','layer','upload','miniTab'], function() {
        var $ = layui.jquery,
            select = layui.select,
            upload = layui.upload,
            miniTab = layui.miniTab,
            layer = layui.layer,
            form = layui.form;

        layui.code();

        //监听发布-打开弹窗
        form.on('submit(submit)', function(data){
            $("#title").val(data.field.title);
            $("#content").val(data.field.content);
            layer.open({
                type: 1,
                content: $('#release'), //这里content是一个DOM
                title: "发布文章",
                area: ['750px', '600px']
            });
            return false;
        });
        //发布按钮
        form.on("submit(release)", function (data){
            data = data.field;
            $.ajax({
                url:"/system/article/release" , // 请求路径
                type:"post" , //请求方式
                data:JSON.stringify(data),
                contentType:"application/json",
                dataType:"json",//设置接受到的响应数据的格式
                success:function (res) {
                    if (res.code == 200) {
                        layer.msg(
                            res.message,
                            {time: 1500},
                            function () {
                                //关闭当前Tab窗口
                                miniTab.deleteCurrentByIframe();
                            });
                    } else {
                        layer.msg(res.message);
                    }

                },//响应成功后的回调函数
                error:function () {
                    layer.msg("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
            });

        });
        //保存草稿
        form.on("submit(draft)", function (data) {
           data = data.field;
            $.ajax({
                url:"/system/article/draft" , // 请求路径
                type:"post" , //请求方式
                data:JSON.stringify(data),
                contentType:"application/json",
                dataType:"json",//设置接受到的响应数据的格式
                success:function (res) {
                    if (res.code == 200) {
                        layer.msg(
                            res.message,
                            {time: 1500},
                            function () {
                                //关闭当前Tab窗口
                                miniTab.deleteCurrentByIframe();
                            });
                    } else {
                        layer.msg(res.message);
                    }
                },//响应成功后的回调函数
                error:function () {
                    layer.msg("出错啦...");
                },//表示如果请求响应出现错误，会执行的回调函数
            });
            
        });
        //取消发布

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/system/article/coverImgUpload' //改成您自己的上传接口
            ,size: 2048  //单位kb
            ,exts: 'jpg|png|gif|bmp|jpeg'
            ,done: function(res){
                console.log(res);
                //如果上传成功
                if(res.code == 200){
                    layer.msg(res.message);
                    //预读本地文件示例，不支持ie8
                    $('#demo1').attr('src',res.data); //图片链接（base64）
                    $('#coverImg').attr("value",res.data);
                }
                //上传成功
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        function markdownToHtml(){
            markdownHtml = editormd.markdownToHTML("markdownToHtml", {
                markdown        : $("#markdown").text() ,//+ "\r\n" + $("#append-test").text(),
                //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
                htmlDecode      : "style,script,iframe",  // you can filter tags decode
            });
        }
    });

    function cancel(){
        this.layui.layer.closeAll();
    }

</script>
</body>
</html>